import { Component, OnInit, Input } from '@angular/core';
import { interval } from 'rxjs';

@Component({
  selector: 'app-grow-num',
  templateUrl: './grow-num.component.html',
  styleUrls: ['./grow-num.component.less']
})
export class GrowNumComponent implements OnInit {
  @Input() suffix = '';
  @Input() maxNum;
  @Input() during = 1000;
  num = 0;
  timer = null;

  constructor() { }

  ngOnInit(): void {
    const speed = this.maxNum ? (this.during / this.maxNum) : 100;
    this.growingNum(speed);
  }

  growingNum = (speed: number) => {
    this.timer = interval(speed || 100).subscribe(() => {
      if (this.num < this.maxNum) {
        this.num++;
      } else {
        clearInterval(this.timer);
        this.timer = null;
      }
    })
  }

}
